<template>
  <div class="mainbody">
    <!-- 搜索区域 -->
    <div class="searchBox">
      <el-form :inline="true"
               :model="listQuery"
               size="small">
        <el-form-item label="
               课程名称">
          <el-input v-model="listQuery.course_name"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="课程分类">
          <el-select multiple
                     placeholder="请选择"
                     v-model="listQuery.type">
            <el-option v-for="item in courseClassifyOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="primary"
                 icon="el-icon-search"
                 size="mini"
                 @click="handleFilter">搜索</el-button>
      <el-button icon="el-icon-refresh"
                 size="mini"
                 @click="reset">重置</el-button>
      <el-button type="primary"
                 size="mini"
                 icon="el-icon-plus"
                 @click="showAddDialog">新增</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="tableBox"
         style="margin-top:20px">
      <el-table :data="list"
                v-loading="listLoading"
                element-loading-text="拼命加载中"
                border
                stripe
                :height="tableHeight"
                style="width: 100%">
        <el-table-column prop="course_id"
                         label="课程id"
                         align="center">
        </el-table-column>
        <el-table-column prop="course_name"
                         label="课程名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="type"
                         label="课程分类"
                         width="120px"
                         align="center">
          <template slot-scope="scope">
            <span>{{scope.row.type|sourceType}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sort"
                         align="center"
                         label="排序">
        </el-table-column>
        <el-table-column prop="desc"
                         label="活动简介"
                         align="center"
                         width="180">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.desc"
                        placement="top">
              <div style="
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                white-space: normal;
              ">
                {{ scope.row.desc }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="cour"
                         align="center"
                         label="课程二维码"
                         width="180">
          <template slot-scope="scope">
            <el-image v-if="scope.row.file_info.url"
                      style="width: 50px; height: 50px;border-radius: 50%;"
                      :src="scope.row.file_info.url"
                      :preview-src-list="[scope.row.file_info.url]">
            </el-image>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="cour"
                         align="center"
                         label="视频源文件"
                         width="180">
        </el-table-column> -->
        <el-table-column prop="status"
                         align="center"
                         label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.status|statusType}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="yueziCenter"
                         align="center"
                         label="月子中心">
          <template slot-scope="scope">
            <el-popover placement="top-start"
                        width="400"
                        trigger="hover">
              <el-table :data="scope.row.postpartum_list_info">
                <el-table-column width="100"
                                 property="postpartum_id"
                                 label="id"></el-table-column>
                <el-table-column width="300"
                                 property="postpartum_name"
                                 label="名称"></el-table-column>
              </el-table>
              <el-button type="text"
                         slot="reference">查看</el-button>
            </el-popover>
          </template>

        </el-table-column>
        <el-table-column prop="created_at"
                         label="创建时间"
                         align="center"
                         width="200px">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="100">
          <template slot-scope="scope">
            <el-button @click="showDrawer(scope.row)"
                       type="text"
                       size="small">编辑</el-button>
            <el-button type="text"
                       size="small"
                       @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination :page-sizes="[20,50,100,200]"
                     :total="total"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>

    <!-- 弹出 标签页-->
    <el-drawer :visible.sync="drawer"
               direction="rtl"
               :with-header="false"
               size="60%"
               ref="aaa"
               title="操作">
      <Tabs ref="tabs"
            :activeName="activeName"
            :activelabel="activelabel"
            :tabs="tabs"
            :row="row"
            :course_id="course_id"></Tabs>
    </el-drawer>

    <!-- 新增对话框 -->
    <el-dialog title="新增"
               :visible.sync="dialogVisible"
               width="70%"
               :before-close="handleClose">
      <div class="dialogContent">
        <CourseNew ref="submitFrom"
                   @closeAddDialog="closeAddDialog"></CourseNew>
      </div>

      <!-- <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   ref="showAddDialog"
                   @click="submit">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import { getCourseList, delCourse } from "@/api/system/training"
import CourseNew from "@/views/trainingCourse/components/courseNew.vue"
//导入tabs组件
import Tabs from '@/components/Tabs/Tab.vue'
const courseClassifyOptions = [
  { value: 0, label: "课程二维码" },
  { value: 1, label: "视频源文件" }
]
export default {
  filters: {
    sourceType (val) {
      const key = {
        0: '课程二维码',
        1: "视频源文件"
      }
      return key[val]
    },
    statusType (val) {
      const key = {
        0: '下架',
        1: "上架"
      }
      return key[val]
    }
  },
  components: { Tabs, CourseNew },
  computed: {
    tableHeight () {
      const fullHeight = document.documentElement.clientHeight
      console.log(fullHeight, 'fullHeight')
      return fullHeight - 290;
    }
  },
  created () {
    this.getList()
  },
  data () {
    return {
      activeName: '',
      activelabel: '',
      popoverData: [],
      courseClassifyOptions,
      courseGroup: [],
      total: 1,
      drawer: false,
      listLoading: true,
      dialogVisible: false,
      row: "",
      course_id: "",//点击查看的当前行  要给子传过去
      tabs: [
        { label: "详情", name: "course_details" },
        { label: "编辑", name: "course_edit" }
      ],
      disabled: false,
      list: null,
      listQuery: {
        page: 1,
        page_size: 20,
        course_id: null,
        course_name: "",
        category_id: "",
        status: "",
        type: []
      }
    }
  },
  methods: {
    getList () {
      this.listLoading = true
      getCourseList(this.listQuery).then((res) => {
        if (res.data.code == "200") {
          this.list = res.data.data.list
          this.total = res.data.data.count
          this.listLoading = false
          this.$message.success("获取列表成功")
        } else {
          this.$message.error(res.data.msg)
        }

      })

    },

    //搜索
    handleFilter () {
      this.listQuery.page = 1
      this.getList()
      console.log(this.listQuery.type);
    },
    //重置
    reset () {
      this.resetTemp()
      this.getList()
    },
    //新增
    showAddDialog () {
      this.dialogVisible = true
    },
    closeAddDialog () {
      this.dialogVisible = false
    },
    //删除
    del (row) {
      this.$confirm('是否删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCourse({ course_id: row.course_id }).then(res => {
          if (res.data.code == "200") {
            this.$message.success(res.data.msg)
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }


        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });


    },
    handleSizeChange (val) {
      this.listQuery.page_size = val
      this.listQuery.page = 1
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.getList()
    },
    showDrawer (id) {
      this.activeName = 'course_edit'
      this.activelabel = '编辑'
      this.drawer = true
      this.course_id = id.course_id
      this.row = id

    },
    resetTemp () {
      this.listQuery = {
        page: 1,
        page_size: 20,
        course_id: "",
        course_name: "",
        category_id: "",
        status: "",
        type: []
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    submit () {
      this.$nextTick(() => {
        this.$refs["submitFrom"].submitUpload();
      });
    },
    //关闭弹窗（子组件）
    closeDrawer () {
      this.drawer = false
    }

  },
  provide () {
    return {
      closeDrawer: this.closeDrawer
    }
  }
}
</script>

<style lang="less" scoped>
.searchBox {
  height: 100px;
}
.tableBox {
  box-shadow: 5px 5px 15px #ccc;
}
// .dialogContent {
//   height: 70%;
//   overflow: auto;
// }
</style>